<template>
  <div class="content">
    <ul>
      <!-- 根据奇偶行设置特定的类名，还需算出一行所占宽度，为了让下一行的盒子能够对应上 -->
      <li :class="{'list-li':(index+1)%2!==0, 'reverse-li':(index+1)%2===0}"
      :style="{width: maxLen===3?'750px':'780px'}" v-for="(item, index) in list" :key="index">
        <!-- 正向行 -->
        <template v-if="(index+1)%2!==0">
          <div class="li-box" v-for="(i, key) in item" :key="key+index">
            <div class="box">
              <!-- 自定义盒子内容 -->
              <div class="sub-box">{{i}}</div>
              <!-- 不为第一个，当前项为最后一个，当前项为最大值，总数大于最大值 -->
              <i v-if="key!==0&&key === maxLen-1 && key%(maxLen-1)===0 && originArray.length > maxLen"
              :class="{'el-icon-d-arrow-right':true, 'arrow-down':true}"></i>
            </div>
            <i v-if="key!==item.length-1" class="el-icon-d-arrow-right"></i>
          </div>
        </template>
        <!-- 反向行 -->
        <template v-else-if="(index+1)%2===0">
          <div class="li-box" v-for="(i, key) in item" :key="key+index">
            <div class="box">
              <div class="sub-box">{{i}}</div>
              <i v-if="key!==0&&key === maxLen-1 && key%(maxLen-1)===0 && originArray.length > maxLen"
              :class="{'el-icon-d-arrow-right':true, 'arrow-down':true}"></i>
            </div>
            <i v-if="key!==0" class="el-icon-d-arrow-left"></i>
          </div>
        </template>
      </li>
    </ul>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'work',
  components: {

  },
  data() {
    return {
      originArray: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], // 未处理的数组
      list: [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13,14,15],[16,17,18],[19,20]], // 处理后的二维数组
      maxLen: 3 // 设定一行多少个
    }
  },
  computed: {
    ...mapGetters({
      codeCombo: 'getCodeCombo',
      permissionList: 'getPermission',
      userInfo: 'getUserInfo',
    }),
  },
  activated() {

  },
  created() {

  },
  methods: {

  },
}
</script>

<style lang="scss" scoped>
  .content{
    position: relative;
    .list-li {
      display: flex;
      justify-content: flex-start;
      margin: 0 auto;
    }
    .reverse-li {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      margin: 0 auto;
    }
    i.arrow-down {
      transform: rotateZ(90deg);
      position: absolute;
      top:220px;
      left: 0;
      right: 0;
      bottom: -8px;
    }
    .li-box {
      display: flex;
      align-items: center;
    }
    .box {
      position: relative;
      padding: 20px;
    }
    .sub-box {
      border: 1px solid;
      width: 200px;
      line-height: 64px;
    }
  }

</style>
